<template>
	<view class="">
		<!-- 顶部自定义导航栏 -->
		<view class="top_bg ">
			<view class="nav-top flex">
				<view class="left_width flex">
					<image class="left_img" @click="go_back" src="../static/left.png" mode="widthFix"></image>
					<view class="title-top">{{title_name}}</view>
				</view>
				<view class="jia"></view>
			</view>
		</view>

		<view class="content-width">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item,index) in swipeList" :key="index" :right-options="options2"
					@click="swipeClick($event,item, index)" :show="isOpened" @change="change_open(item,index)">
					<view class="content-box">
						<!-- <view class="sr-bt">{{item.shouru_name}}</view> -->
						<input type="text" @blur="blur(item)"
							:disabled="idx == index || !item.inouttype_id ? disabled : true" class="inpt-bt"
							v-model="item.name">
						<image class="line" src="../static/xian.png" mode="widthFix"></image>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="xiang flex" @click="add_data_type">
			<image class="jia-0" src="../static/add.png" mode="widthFix"></image>
			<view class="wenzi">选项</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title_name: '',
				isOpened: 'none',
				options2: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#F56C6C'
						}
					}
				],
				disabled: true,
				swipeList: [],
				type: '',
				idx: '',
			}
		},
		onReady() {
			// 模拟延迟赋值
			setTimeout(() => {
				// this.isOpened = 'right';
			}, 1000);
		},
		onLoad(option) {
			console.log("传过来的type值为", option);
			this.type = option.type
			if (option.type == 0) {
				this.title_name = '收入类型'
			}
			if (option.type == 1) {
				this.title_name = '支出类型'
			}
			this.getData()
		},
		methods: {
			getData() {
				this.$H.post('/v2/store/user/inouttype', {
					type: this.type,
				}).then(res => {
					if (res.status.succeed == 1) {
						this.swipeList = res.data
					}
					console.log("获取账户明细列表", res);
				})
			},
			change(e) {
				console.log("e:", e);
			},

			go_back() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindClick(e) {
				console.log(e);
				uni.showToast({
					title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
					icon: 'none'
				});
			},
			change_open(e, index) {
				this.isOpened = e;
				console.log('返回：', e, index);
			},
			swipeClick(e, item, index) {
				console.log("e", e, item, index);
				let {
					content
				} = e;
				let that = this;
				let idx = index;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								that.swipeList.splice(index, 1);
								that.$H.post('/v2/store/user/inouttype/delete', {
									id: item.inouttype_id
								}).then(res => {
									console.log("删除成功", res);
									if (res.status.succeed == 1) {
										uni.showToast({
											title: '删除成功',
											icon: 'none'
										})
										that.getData()
									}

								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (content.text === '编辑') {
					that.disabled = false
					that.idx = index
				}
			},
			// 添加数据
			blur(item) {
				console.log("sssssss", item);
				if (item.inouttype_id) {

					this.$H.post('/v2/store/user/inouttype/update', {
						id: item.inouttype_id,
						name: item.name,
					}).then(res => {
						console.log("修改成功", res);
						if (res.status.succeed == 1) {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							this.getData()
						}

					})
				} else {
					this.$H.post('/v2/store/user/inouttype/add', {
						name: item.name,
						type: this.type, //收入 1是支出
					}).then(res => {
						console.log("添加成功", res);
						if (res.status.succeed == 1) {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							this.getData()
						}
					})
				}
			},
			add_data_type() {
				this.swipeList.push({});
				this.disabled = false
			},
		}
	}
</script>

<style>
	.jia-0 {
		width: 40rpx;
		display: block;
	}

	.wenzi {
		font-size: 40rpx;
		color: #efa445;
		font-weight: 600;
		margin-left: 15rpx;
	}

	.xiang {
		width: 160rpx;
		margin-top: 40rpx;
		margin-left: 40rpx;
	}

	.inpt-bt {
		font-size: 35rpx;
		color: #000;
		font-weight: 600;
	}

	.sr-bt {
		font-size: 35rpx;
		color: #000;
		font-weight: 600;
	}

	.line {
		width: 50rpx;
		display: block;
	}

	.content-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		line-height: 44px;
		padding: 0 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	/* .content-box:last-of-type {
		border: none;
	} */

	.content-width {
		width: 690rpx;
		margin: 50rpx auto auto;
		background-color: #fff;
		padding: 25rpx 0 30rpx 0;
	}

	.nav-top {
		width: 690rpx;
		padding-bottom: 20rpx;
		margin: 140rpx auto auto;
		justify-content: space-between;
	}

	.title-top {
		font-size: 40rpx;
		color: #fff;
		font-weight: 600;
	}



	.left_img {
		width: 35rpx;
		margin-right: 20rpx;
		display: block;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.top-width {
		width: 750rpx;
		height: 80rpx;
		background-color: #f6f6f6;
	}

	.center-width {
		width: 690rpx;
		margin: auto;
		justify-content: space-between;
	}

	.jia {
		font-size: 35rpx;
		color: #fff;
		font-weight: 600;
	}

	.top_bg {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ff9a23;
	}
</style>